<template>
  <div>
    <my-header v-show="isShow"></my-header>
    <article>
      <h3>我是Content的标题</h3>
      <div v-show="idIsOdd"><b><span class="red">id{{id}}为奇数</span> 不显示 MyHeader和MyFooter 组件</b></div>
      <div v-show="idIsEven"><b><span class="red">id{{id}}为偶数</span> 显示 MyHeader和MyFooter 组件</b></div>
      <br/>
      我是content的路径：{{path}}
    </article>
    <my-footer v-show="isShow"></my-footer>
  </div>
</template>

<script>
import MyHeader from '@/components/MyHeader'
import MyFooter from '@/components/MyFooter'

export default {
  name: 'Content',
  components: {MyFooter, MyHeader},
  data () {
    return {
      id: this.$route.params.id,
      path: this.$route.path
    }
  },
  computed: {
    isShow () {
      console.log('执行了 home/Content.vue 的 computed.isShow()')
      return this.$store.state.footer
    },
    // id为奇数
    idIsOdd () {
      if ((this.id % 2) !== 0) {
        return true
      }
      return false
    },
    // id为偶数
    idIsEven () {
      if ((this.id % 2) === 0) {
        return true
      }
      return false
    }
  }
}
</script>

<style scoped>
article {
  text-align: center;
  color: black;
}
.red {
  color: red;
}
</style>
